<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.25" charset="UTF-8">
    <title>new Order</title>
    <link rel="StyleSheet" th:href="@{/css/jpetstore.css}" type="text/css" media="screen"/>
</head>
<body>
<header th:replace="common/top"></header>


<div id="Catalog">

    <div id="BackLink">
        <!-- 此处的href的链接对应的是controller中的方法 -->
        <a href="/catalog/view">Return to Main Menu</a>
    </div>

    <h2>Order Confirmation</h2>

    <table>
        <tr>
            <th colspan="2">Billing Address</th>
        </tr>
        <tr>
            <td>Name:</td>
            <td th:text="${order.billToFirstName + ' ' + order.billToLastName}"></td>
        </tr>
        <tr>
            <td>Address:</td>
            <td>
                <span th:text="${order.billAddress1}"></span>
                <span th:if="${order.billAddress2}" th:text="${order.billAddress2}"></span>
            </td>
        </tr>
        <tr>
            <td>City:</td>
            <td th:text="${order.billCity}"></td>
        </tr>
        <tr>
            <td>State/Zip:</td>
            <td th:text="${order.billState + ' ' + order.billZip}"></td>
        </tr>

        <!-- Shipping Address Section -->
        <tr>
            <th colspan="2">Shipping Address</th>
        </tr>
        <tr>
            <td>Name:</td>
            <td th:text="${order.shipToFirstName + ' ' + order.shipToLastName}"></td>
        </tr>
        <tr>
            <td>Address:</td>
            <td>
                <span th:text="${order.shipAddress1}"></span>
                <span th:if="${order.shipAddress2}" th:text="${order.shipAddress2}"></span>
            </td>
        </tr>
        <tr>
            <td>City:</td>
            <td th:text="${order.shipCity}"></td>
        </tr>
        <tr>
            <td>State/Zip:</td>
            <td th:text="${order.shipState + ' ' + order.shipZip}"></td>
        </tr>
    </table>

    <div class="TotalPrice">
        Total: <span th:text="${#numbers.formatCurrency(order.totalPrice)}"></span>
    </div>

    <form th:action="@{/order/submit}" method="post">
        <input type="submit" value="Confirm Order" class="Button"/>
    </form>
</div>

<div th:replace="common/bottom"></div>
</body>
</html>